<template>
    <DialogVue :data="dialogData" @close="onDialogClose">
        <template #content>
            <div class="price-container">
                <el-form
                    ref="ruleFormRef"
                    :inline="true"
                    :model="data.config"
                    :rules="data.configRules"
                    label-width="120px"
                    style="width: 100%; display: flex; flex-wrap: wrap"
                >
                    <el-form-item label="产品名称：" prop="type">
                        <!-- <el-button style="width: 180px" type="primary">{{ data.config.productType }}</el-button> -->
                        <el-input v-model="data.config.productType" disabled style="width: 180px"></el-input>
                        <!-- <el-radio-group v-model="data.config.productType" @change="data.onSelectTableType(ruleFormRef)">
                            <el-radio-button v-for="item in data.TABLE_TYPE" :key="item" :label="item" />
                        </el-radio-group> -->
                    </el-form-item>
                    <el-form-item label="市场价：" prop="defaultPrice">
                        <div class="line-content">
                            <el-input
                                v-model="data.config.defaultPrice"
                                placeholder="请输入价格"
                                clearable
                                style="width: 180px"
                                type="number"
                            ></el-input>
                        </div>
                        <p style="margin-left: 8px">元/次</p>
                    </el-form-item>
                    <el-form-item label="优惠价：" prop="promotionPrice">
                        <div class="line-content">
                            <el-input
                                v-model="data.config.promotionPrice"
                                placeholder="请输入价格"
                                clearable
                                style="width: 180px"
                                type="number"
                            ></el-input>
                        </div>
                        <p style="margin-left: 8px">元</p>
                    </el-form-item>
                    <el-form-item label="销售价：" prop="promotionPrice">
                        <div class="line-content">
                            <el-input
                                :value="
                                    (Number(data.config.defaultPrice) - Number(data.config.promotionPrice)).toFixed(2)
                                "
                                placeholder="请输入价格"
                                disabled
                                style="width: 180px"
                                type="number"
                            ></el-input>
                        </div>
                        <p style="margin-left: 8px">元/次</p>
                    </el-form-item>
                </el-form>

                <div class="btn">
                    <el-button
                        type="primary"
                        @click="
                            data.onComfirmEdit(ruleFormRef, () => {
                                emits('visible')
                            })
                        "
                        >确定</el-button
                    >
                    <el-button @click="onDialogClose">取消</el-button>
                </div>
            </div>
        </template>
    </DialogVue>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import DialogVue from '@/components/baseDialog/Index.vue'
import { FormInstance } from 'element-plus'
import { SinglePrice, ProductTypeList, ProductType } from '.'

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['visible'])

/**
 * 监听父组件传递的参数
 */
const props = defineProps(['data'])

/**
 * form 表单
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 弹窗数据
 */
const dialogData = reactive({
    visible: false,
    type: 'create',
    title: '新增价格设置-单笔',
    width: '620px'
})

/**
 * 初始化数据
 */
const data = reactive(new SinglePrice())

/**
 * 监听参数变化
 */
watchEffect(() => {
    console.log('singlepriceDialog', props.data)
    dialogData.visible = props.data.visible
    dialogData.type = props.data.type
    dialogData.title = props.data.type === 'edit' ? '编辑价格设置-单笔' : '新增价格设置-单笔'
    data.config.type = props.data.type

    data.resetData()
    if (props.data.visible) {
        if (props.data.type === 'edit') {
            data.config.id = props.data.data.id
            //标准单价
            data.config.defaultPrice = props.data.data.basicPrice
            //活动单价
            data.config.promotionPrice = (
                Number(props.data.data.basicPrice) - Number(props.data.data.singlePrice)
            ).toFixed(2)
            //productType 产品类型（1.车况-出险；2.车况-维保车况）
            const type = props.data.data.productType
            data.config.productType = ProductType[type]
            data.TABLE_TYPE.length = 0
            data.TABLE_TYPE.push(data.config.productType)
        } else {
            data.config.productType = ProductType[1]
            data.TABLE_TYPE.length = 0
            data.TABLE_TYPE.push(...ProductTypeList)
            console.log(data.TABLE_TYPE, ProductTypeList)
        }
    }
})

/**
 * 监听弹窗关闭
 */
const onDialogClose = () => {
    //重置数据
    data.resetData()
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    emits('visible')
}

/**
 * 重置校验
 * @param formEl
 */
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px 0;
}
</style>
